<template>
  <div class="box">
    <h4>Child1</h4>
    <div>父组件传过来的数据message: {{ message }}</div>
    <input type="text" :value="message" @input="inputHandler">
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  message: string
}>()

// 没加TS
// const emit = defineEmits(['input'])
// 加TS
const emit = defineEmits<{
  (e: 'input', str: string): void
}>()

// HTMLElement 内置类型
// 每一个DOM元素都有TS类型,我们这里是input元素,input元素有自己的类型HTMLInputElement
// 记上一到两个标签的类型,然后其他的标签类型,通过 `ctrl + 鼠标左键` 进入系统内置类型声明文件
// 大概在第 17000 行左右,有所有标签的类型声明,使用哪个就复制哪一个就行
// div的类型: HTMLElement 
// input的类型： HTMLInputElement
const inputHandler = (e: Event) => {
  // console.log((e.target as HTMLInputElement).value)
  emit('input', (e.target as HTMLInputElement).value)
}
</script>
